<template>
  <div ref="chartRef" style="width: 100%; height: 600px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, useTemplateRef } from "vue";
import chinaMap from "../../assets/json/china.json";

const chartRef = useTemplateRef("chartRef");
let myChart = null;
const initChart = () => {
  myChart = echarts.init(chartRef.value);
  echarts.registerMap("china", chinaMap);
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}",
    },
    geo: {
      //地理坐标系组件
      type: "map", //类别
      map: "china", //添加的中国地图
      label: {
        //标签样式
        show: true,
        color: "#fff",
        fontSize: 10,
      },
      itemStyle: {
        //图形样式
        areaColor: "#32c5e9", //地图区域颜色
        borderColor: "#fff", //边框的颜色
        borderWidth: 1, //边框宽
      },
      zoom: 1.2, //缩放比例
      emphasis: {
        //高亮状态样式
        label: {
          color: "#333",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#ff9f7f",
        },
      },
    },
    series: [
      //带有涟漪特效
      {
        type: "effectScatter", //带有涟漪特效
        coordinateSystem: "geo",
        label: {
          show: true,
          formatter: "{b}", //数据名称
          position: "right", //位置
          color: "#fff",
        },
        itemStyle: {
          color: "#fb7293", //小圆点的颜色
          shadowColor: "#ffdb5c", //阴影的颜色
          shadowdBlur: 10, //阴影模糊
        },
        symbolSize: 20, //小圆点 大小
        data: [
          { name: "重庆", value: [106.54, 29.59] },
          { name: "成都", value: [104.06, 30.67] },
          { name: "天津", value: [117.2, 39.13] },
        ],
        rippleEffect: {
          brushType: "stroke", //使用描边的方式来绘制波纹
          scale: 3,
        },
      },
      //散点
      {
        type: "scatter",
        coordinateSystem: "geo",
        label: {
          show: true,
          formatter: "{b}", //数据名称
          position: "right", //位置
        },
        itemStyle: {
          color: "#ffdb5c", //小圆点 颜色
        },
        symbolSize: (val) => {
          //小圆点 大小
          return val[1] / 2;
        },
        data: [
          { name: "哈尔滨", value: [126.63, 45.75] },
          { name: "丽水", value: [119.92, 28.45] },
          { name: "石家庄", value: [114.48, 38.03] },
        ],
      },
      //飞线图   利用两个坐标点数据 ，实现飞线与地图的坐标进行联动
      {
        type: "lines", //用于带有起点和终点线数据的绘制
        coordinateSystem: "geo",
        // symbol:['circle','arrow'],    //线两端标记类型
        data: [
          [
            { coord: [86.06, 41.68] }, //  起始点坐标 库尔勒
            { coord: [114.31, 30.52] }, //终点坐标  武汉
          ],
          [
            { coord: [91.11, 29.97] }, //  起始点坐标   拉萨
            { coord: [121.48, 31.22] }, //终点坐标      上海
          ],
          [
            { coord: [114.31, 30.52] }, //  起始点坐标  武汉
            { coord: [110.35, 20.02] }, //终点坐标   海口
          ],
          [
            { coord: [114.31, 30.52] }, //  起始点坐标  武汉
            { coord: [102.73, 25.04] }, //终点坐标  昆明
          ],
        ],
        lineStyle: {
          //线条的样式
          normal: {
            type: "dashed", //虚线
            color: "#fb7293", //线的颜色
            width: 2, //线条的宽度
            curveness: 0.3, //线条的曲直条
          },
        },
        effect: {
          show: true,
          symbol: "image://src/assets/img/plane.png", // symbol自定义的图标设置图片   箭头arrow    圆形    三角形    pin地图针形
          color: "#ffdb5c",
          symbolSize: 20, //大小
          trailLength: 0, //特效尾迹长度
          period: 5, //箭头指向的速度，值越小速度越快
        },
      },
      //发射点位置涟漪
      {
        type: "effectScatter", //带有涟漪特效
        coordinateSystem: "geo",
        label: {
          show: true,
          formatter: "{b}", //数据名称
          position: "right", //位置
          color: "#fff",
        },
        itemStyle: {
          color: "#8378ea", //小圆点的颜色
          shadowColor: "#ffdb5c", //阴影的颜色
          shadowdBlur: 10, //阴影模糊
        },
        symbolSize: 10, //小圆点 大小
        data: [
          { name: "库尔勒", value: [86.06, 41.68] },
          { name: "武汉", value: [114.31, 30.52] },
          { name: "上海", value: [121.48, 31.22] },
          { name: "拉萨", value: [91.11, 29.97] },
          { name: "海口", value: [110.35, 20.02] },
          { name: "昆明", value: [102.73, 25.04] },
        ],
        rippleEffect: {
          //
          brushType: "stroke", //使用描边的方式来绘制波纹
          scale: 3,
          period: 4, //动画时间，值越小速度越快
        },
      },
    ],
  };

  myChart.setOption(option);
};

const handleResize = () => {
  myChart.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart.dispose();
});
</script>

<style scoped></style>
